import { html, render } from "lit-html";
import { displayError } from "../../components/displayError";
import { validate } from "../../crypto/mnemonic";
import { parseUserNumber } from "../../utils/userNumber";

const pageContent = () => html`
  <style>
    #inputSeedPhrase {
      width: 100%;
      height: 6rem;
      box-sizing: border-box;
      margin-bottom: 1rem;
      font-size: 1rem;
      font-weight: 400;
    }

    #warningBadAnchor {
      color: red;
      text-align: center;
      width: 100%;
    }

    .full-width {
      width: 100%;
    }
  </style>
  <div class="container full-width">
    <h1>Your seed phrase</h1>
    <p>Please provide your seed phrase</p>
    <p id="warningBadAnchor"></p>
    <textarea id="inputSeedPhrase" placeholder="Your seed phrase"></textarea>
    <button id="inputSeedPhraseContinue" class="primary">Continue</button>
    <button id="inputSeedPhraseCancel">Cancel</button>
  </div>
`;

export const inputSeedPhrase = async (
  userNumber: bigint
): Promise<string | null> => {
  const container = document.getElementById("pageContent") as HTMLElement;
  render(pageContent(), container);
  return init(userNumber);
};

const init = (userNumber: bigint): Promise<string | null> =>
  new Promise((resolve) => {
    const inputSeedPhraseInput = document.getElementById(
      "inputSeedPhrase"
    ) as HTMLInputElement;
    const warningBadAnchor = document.getElementById(
      "warningBadAnchor"
    ) as HTMLParagraphElement;
    inputSeedPhraseInput.oninput = () => {
      const lun = leadingUserNumber(inputSeedPhraseInput.value.trim());
      if (lun !== null && lun !== userNumber) {
        warningBadAnchor.innerHTML = `<strong>warning</strong><br/>
                    it looks like you are using a seed phrase for anchor <strong>${lun}</strong> but the anchor you are trying to recover is <strong>${userNumber}</strong>
            `;
      } else {
        warningBadAnchor.innerHTML = "";
      }
    };
    const inputSeedPhraseContinue = document.getElementById(
      "inputSeedPhraseContinue"
    ) as HTMLButtonElement;
    const inputSeedPhraseCancel = document.getElementById(
      "inputSeedPhraseCancel"
    ) as HTMLButtonElement;
    inputSeedPhraseCancel.onclick = () => {
      resolve(null);
    };
    inputSeedPhraseContinue.onclick = async () => {
      const inputValue = dropLeadingUserNumber(
        inputSeedPhraseInput.value.trim()
      );
      if (validate(inputValue)) {
        resolve(inputValue);
      } else {
        await displayError({
          title: "Invalid Seedphrase",
          message:
            "This is not a seed phrase generated by Internet Identity, please make sure to copy the full seedphrase and try again.",
          primaryButton: "Try again",
        });
        resolve(inputSeedPhrase(userNumber));
      }
    };
  });

const dropLeadingUserNumber = (s: string): string => {
  const i = s.indexOf(" ");
  if (i !== -1 && parseUserNumber(s.slice(0, i)) !== null) {
    return s.slice(i + 1);
  } else {
    return s;
  }
};

const leadingUserNumber = (s: string): bigint | null => {
  const i = s.indexOf(" ");
  if (i !== -1) {
    return parseUserNumber(s.slice(0, i));
  } else {
    return null;
  }
};
